{template 'header'}
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/css/member/purse.css">
<body>
    <div class="content" id="content">
        <div class="head">
            <header class="mui-bar mui-bar-nav" style="background-image:url('../addons/mx_shop/resources/cgc/images/purse6.png')">
                <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
                <h1 class="mui-title" id="title" style="color: white;">钱包页</h1>
            </header>
            <div class="top">
                <p class="explannation">
                    商品的退货期内，返现的余额是冻结的，为期一周
                </p>
                <img src="../addons/mx_shop/resources/cgc/images/purse5.png">
            </div>
            <div class="center">
                <p class="num">50.00</p>
                <p class="total">总余额</p>
            </div>
            <div class="bottom">
                <ul>
                    <li>
                        <div class="circle"></div>
                        可用余额 &nbsp;&nbsp;&nbsp;&nbsp;￥
                        <span>40.00</span>
                    </li>
                    <li>
                        <div class="circle"></div>
                        冻结余额 &nbsp;&nbsp;&nbsp;&nbsp;￥
                        <span>10.00</span>
                    </li>
                </ul>
                <div class="clear"></div>
            </div>
            <div class="select">
                <ul>
                    <li>
                        <img src="../addons/mx_shop/resources/cgc/images/purse2.png">
                        <span>充值</span>
                    </li>
                    <li>
                        <img src="../addons/mx_shop/resources/cgc/images/purse3.png">
                        <span>账单</span>
                    </li>
                    <li>
                        <img src="../addons/mx_shop/resources/cgc/images/purse4.png">
                        <span>余额日记</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="gra">
            <div class="trend">
                <p>最近7天消费趋势</p>
            </div>
            <div class="line">
            </div>
            <div class="banlance">
                <p>余额收入</p>
                <div class="sign">
                    <span class="s_top"></span>
                    <span class="sur">冻结余额</span>
                    <div class="tz">
                        <span class="s_bottom"></span>
                        <span class="sur">可用余额</span>
                    </div>
                </div>
            </div>
            <div class="column">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../addons/mx_shop/resources/cgc/js/member/echarts.min.js"></script>
    <script>



        $(function () {
            var myChart1 = echarts.init(document.getElementsByClassName('line')[0]);
            var myChart2 = echarts.init(document.getElementsByClassName('column')[0]);


            var option1 = {
                tooltip: {
                    trigger: 'axis'
                },
                grid: {
                    x:400,
                    left: '1%',
                    right: '15%',
                    bottom: '5%',
                    top: '15%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    name: '日期',
                    boundaryGap: false,
                    boundaryGap: ['50%','50%'],
                    data: ['05-01', '05-02','05-03','05-04','05-05','05-06','05-07'],
                    axisLabel :{
                        interval:0,
                        rotate:26
                    },
                    axisTick: {length:0}
                },
                yAxis: {
                    nameTextStyle:{
                        padding:[0,0,0,20]
                    },
                    type: 'value',
                    //data: ['20', '30', '50', '100', '200'],
                    name:"金额 （元）",
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#79b2ff'
                        }
                    },
                    axisTick: {length:0}
                },
                series: [{
                    name: '收益',
                    type: 'line',
                    symbol: 'circle',
                    stack: '总量',
                    data: [25, 31, 80, 40, 90, 150, 99],
                    itemStyle:{
                        normal:{
                            lineStyle:{
                                color: '#fb7765'
                            }
                        }
                    },
                    areaStyle:{
                        normal:{
                            color:'#fff1ef'
                        }
                    }
                }]
            };

            var option2 = {
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '1%',
                    right: '13%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        name:"时间",
                        data : ['05-01','05-02','05-03','05-04','05-05','05-06','05-07'],
                        axisLabel :{
                            interval:0,
                            rotate:26
                        },
                        axisTick: {
                            length:0
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        name:"收益",
                        min: 20,
                        max: 200,
                        data:["20","30","50","100","200"],
                        axisLabel :{
                            interval:5
                        },
                        axisTick: {
                            length:0
                        }
                    }
                ],
                series : [
                    {
                        name:'冻结余额',
                        barWidth : 7,
                        type:'bar',
                        itemStyle:{
                            normal:{
                                color:'#badbf8'
                            }
                        },
                        data:[49, 76, 76, 49, 76, 76, 100]
                    },
                    {
                        name:'可用余额',
                        barWidth : 7,
                        type:'bar',
                        itemStyle:{
                            normal:{
                                color:'#79b2ff'
                            }
                        },
                        data:[70, 110, 38, 70, 110, 38, 70]
                    },
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);

            // 使用刚指定的配置项和数据显示图表。
             myChart2.setOption(option2);
        })
    </script>
</body>
</html>